<template>
  <div class="q-pa-md">
    <div class="q-mb-sm">
      <t-badge color="teal" @click="show"> Model: {{ proxyDate }} </t-badge>
    </div>

    <!-- <t-btn icon="event" round color="primary">
      <t-popup-proxy
        @before-show="updateProxy"
        cover
        transition-show="scale"
        transition-hide="scale"
      > -->
        <t-date v-model="proxyDate" range type="range" @confirm="confirm" @close="close" ref="tdate">
          <div class="row items-center justify-end q-gutter-sm">
            <t-btn label="Cancel" color="primary" flat v-close-popup />
            <t-btn
              label="OK"
              color="primary"
              flat
              @click="save"
              v-close-popup
            />
          </div>
        </t-date>
      <!-- </t-popup-proxy>
    </t-btn> -->
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const date = ref('2019/03/01');
      const proxyDate = ref('2019/03/01');
      const tdate = ref(null);
      return {
        tdate,
        date,
        proxyDate,

        updateProxy() {
          proxyDate.value = date.value;
        },

        save() {
          date.value = proxyDate.value;
        },
        confirm(value) {
          console.log(value);
        },
        show() {
          tdate.value.calendarShow=true;
        },
        close() {
          console.log('close')
        }
      };
    },
  };
</script>
